import React, { Component } from 'react';
import styles from './sass/tv.scss';
import CSSModules from 'react-css-modules';

import Recnav from './Recnav';


class Recommend extends Component {

  render() {
    return (
      <div styleName="recommend">
        <Recnav></Recnav>
        <div styleName="bigWidth">
          <div styleName="select">
            <div styleName="content">
              <div className="row">
                <div className="col-md-3">
                  <h3>地区</h3>
                  <a href="#">内地</a>
                  <a href="#">香港</a>
                  <a href="#">韩国</a>
                  <a href="#">美国</a><br />
                  <a href="#">日本</a>
                  <a href="#">台湾</a>
                  <a href="#">泰国</a>
                  <a href="#">英国</a>
                </div>
                <div className="col-md-4">
                  <h3>类型</h3>
                  <a href="#">古装</a>
                  <a href="#">言情</a>
                  <a href="#">武侠</a>
                  <a href="#">偶像</a>
                  <a href="#">家庭</a>
                  <a href="#">青春</a>
                  <a href="#">都市</a>
                  <a href="#">喜剧</a>
                  <a href="#">战争</a>
                  <a href="#">军旅</a>
                  <a href="#">谍战</a>
                  <a href="#">悬疑</a>
                </div>
                <div className="col-md-5">
                  <h3>地区</h3>
                  <a href="#">2018</a>
                  <a href="#">2017</a>
                  <a href="#">2015-2011</a>
                  <a href="#">2010-2000</a>
                  <a href="#">90年代</a>

                </div>
              </div>
            </div>

          </div>
        </div>
        <div styleName="wrap">
          <div className="recently_hot">
            <h2>最近热播</h2>
            <dl styleName="hot_one">
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>幸福一家人</dd>
                <dt>董洁、翟天临成斗嘴冤家</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>幸福一家人</dd>
                <dt>董洁、翟天临成斗嘴冤家</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>幸福一家人</dd>
                <dt>董洁、翟天临成斗嘴冤家</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>幸福一家人</dd>
                <dt>董洁、翟天临成斗嘴冤家</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>幸福一家人</dd>
                <dt>董洁、翟天临成斗嘴冤家</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>幸福一家人</dd>
                <dt>董洁、翟天临成斗嘴冤家</dt>
              </div>
            </dl>
            <dl styleName="hot_one">
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>幸福一家人</dd>
                <dt>董洁、翟天临成斗嘴冤家</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>幸福一家人</dd>
                <dt>董洁、翟天临成斗嘴冤家</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>幸福一家人</dd>
                <dt>董洁、翟天临成斗嘴冤家</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>幸福一家人</dd>
                <dt>董洁、翟天临成斗嘴冤家</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>幸福一家人</dd>
                <dt>董洁、翟天临成斗嘴冤家</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>幸福一家人</dd>
                <dt>董洁、翟天临成斗嘴冤家</dt>
              </div>
            </dl>
            <div styleName="clear"></div>
          </div>
          <div className="nature">
            <div styleName="main_title">
              <h2>超自然题材的电视剧</h2>
              <span>更多></span>
              <div styleName="clear"></div>
            </div>

            <dl styleName="hot_one">

              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>创业时代</dd>
                <dt>由黄轩和杨映主演</dt>

              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>创业时代</dd>
                <dt>由黄轩和杨映主演</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>创业时代</dd>
                <dt>由黄轩和杨映主演</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>创业时代</dd>
                <dt>由黄轩和杨映主演</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>创业时代</dd>
                <dt>由黄轩和杨映主演</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>创业时代</dd>
                <dt>由黄轩和杨映主演</dt>
              </div>
            </dl>

          </div>



          <div className="encouragement">
            <div styleName="main_title">
              <h2>励志题材的大陆剧</h2>
              <span>更多></span>
              <div styleName="clear"></div>
            </div>

            <dl styleName="hot_one">
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>创业时代</dd>
                <dt>由黄轩和杨映主演</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>创业时代</dd>
                <dt>由黄轩和杨映主演</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>创业时代</dd>
                <dt>由黄轩和杨映主演</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>创业时代</dd>
                <dt>由黄轩和杨映主演</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>创业时代</dd>
                <dt>由黄轩和杨映主演</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>创业时代</dd>
                <dt>由黄轩和杨映主演</dt>
              </div>
            </dl>
          </div>
          <div className="marriage">
            <div styleName="main_title">
              <h2>关于婚姻的电视剧</h2>
              <span>更多></span>
              <div styleName="clear"></div>
            </div>

            <dl styleName="hot_one">
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>创业时代</dd>
                <dt>由黄轩和杨映主演</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>创业时代</dd>
                <dt>由黄轩和杨映主演</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>创业时代</dd>
                <dt>由黄轩和杨映主演</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>创业时代</dd>
                <dt>由黄轩和杨映主演</dt>
              </div>
            </dl>
            <dl >
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>创业时代</dd>
                <dt>由黄轩和杨映主演</dt>
              </div>
            </dl>
            <dl>
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <dd>创业时代</dd>
                <dt>由黄轩和杨映主演</dt>
              </div>
            </dl>
          </div>

          <div styleName="only">
            <div styleName="main_title">
              <h2>独家策划</h2>
              <span>更多></span>
              <div styleName="clear"></div>
            </div>
            <dl styleName="only_left hot_one" >
              <dt><img src="/images/home/gaishi.jpg" /></dt>
              <div styleName="font_padding">
                <p>老剧重看</p>
                <p>还是原来的味道，还是原来的配方</p>
              </div>
            </dl>
            <div styleName="only_right">
              <dl>
                <dt><img src="/images/home/gaishi.jpg" /></dt>
                <div styleName="font_padding">
                  <dt>陪你过暑假</dt>
                  <dd>经典集结</dd>
                </div>
              </dl>
              <dl>
                <dt><img src="/images/home/gaishi.jpg" /></dt>
                <div styleName="font_padding">
                  <dt>陪你过暑假</dt>
                  <dd>经典集结</dd>
                </div>
              </dl>
              <dl>
                <dt><img src="/images/home/gaishi.jpg" /></dt>
                <div styleName="font_padding">
                  <dt>陪你过暑假</dt>
                  <dd>经典集结</dd>
                </div>
              </dl>
              <dl>
                <dt><img src="/images/home/gaishi.jpg" /></dt>
                <div styleName="font_padding">
                  <dt>陪你过暑假</dt>
                  <dd>经典集结</dd>
                </div>
              </dl>
              <dl>
                <dt><img src="/images/home/gaishi.jpg" /></dt>
                <div styleName="font_padding">
                  <dt>陪你过暑假</dt>
                  <dd>经典集结</dd>
                </div>
              </dl>
              <dl>
                <dt><img src="/images/home/gaishi.jpg" /></dt>
                <div styleName="font_padding">
                  <dt>陪你过暑假</dt>
                  <dd>经典集结</dd>
                </div>
              </dl>
              <dl>
                <dt><img src="/images/home/gaishi.jpg" /></dt>
                <div styleName="font_padding">
                  <dt>陪你过暑假</dt>
                  <dd>经典集结</dd>
                </div>
              </dl>
              <dl>
                <dt><img src="/images/home/gaishi.jpg" /></dt>
                <div styleName="font_padding">
                  <dt>陪你过暑假</dt>
                  <dd>经典集结</dd>
                </div>
              </dl>
            </div>
            <div styleName="clear"></div>
          </div>

        </div>

      </div>
    )
  }
}

export default CSSModules(Recommend, styles, { allowMultiple: true });